<template>
  <approvalView ref="approvalView" />
    <div class="app-table">
      <div class="app-body">
        <div class="app-search">
          <el-form :inline="true" class="demo-form-inline" v-model="form">
            <el-form-item label="起止时间">
              <el-date-picker
                v-model="form.duration"
                type="daterange"
                range-separator="To"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="YYYY-MM-DD"
                :size="large"
              />
            </el-form-item>
            <el-form-item label="使用部门" style="width: 220px;">
              <el-input
                placeholder="请输入使用部门"
                v-model="form.userDepartment"
              ></el-input>
            </el-form-item>
            <el-form-item label="人员姓名" style="width: 220px;">
              <el-input
                placeholder="请输入姓名"
                v-model="form.teacherName"
              ></el-input>
            </el-form-item>
            <el-form-item label="审批状态" style="width: 220px;">
              <el-select placeholder="请选择审批状态" v-model="form.status" clearable>
                <el-option label="未审批" value="0"></el-option>
                <el-option label="已审批" value="1"></el-option>
                <el-option label="已上传" value="2"></el-option>
                <el-option label="已退回" value="4"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSearch" plain>搜索</el-button>
              <el-button type="success" @click="goPersonal" plain>我的任务</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table :data="list" style="margin-bottom: 10px" border :row-class-name="tableRowClassName">
          <el-table-column prop="id" label="序号" width="60" />
          <el-table-column prop="teacherName" label="姓名" width="80" />
          <el-table-column prop="userDepartment" label="使用部门" width="220"/>
          <el-table-column prop="taskName" label="送稿内容" />
          <el-table-column prop="submitTime" label="上传日期" width="110" />
          <el-table-column prop="amount" label="数量" width="70" />
          <el-table-column prop="paperSize" label="纸张" width="80" />
          <el-table-column prop="status" label="状态" width="80" />
          <el-table-column label="操作" width="200px">
            <template #default="scope">
              <el-button size="small" type="success" @click="approval(scope.row)">审批</el-button>
              <el-button size="small" type="danger" v-if="scope.row.status !=='已审批'" @click="deleteApp(scope.row.taskId)">删除</el-button>
            </template>
          </el-table-column>
          <template v-slot:empty>
            <el-empty description="暂无数据"></el-empty>
          </template>
        </el-table>
        <el-config-provider :locale="locale">
          <el-pagination
            background="white"
            :total="total"
            :page-size="limit"
            :page-sizes="[8, 10, 20, 30, 40, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="changePageSize"
            @current-change="changeCurrentPage"
          >
          </el-pagination>
        </el-config-provider>
      </div>
    </div>
</template>
<script  >
import approvalView from './approvalPrintTask'

import { ElConfigProvider, ElMessageBox, ElMessage, ElDatePicker} from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";

import { httpService } from "../../utils/httpService";
import { Picture as IconPicture } from "@element-plus/icons-vue";
export default {
  name: "appListView",
  data() {
    return {
      list: [],
      page: 1,
      limit:8,
      total: 0,
      value:"",
      pageCount: 0,
      form: {
        userDepartment: "",
        status: "",
        teacherName: "",
        duration: ""
      },
    };
  },
  mounted() {
    this.getTaskList();
  },

  components: {
    approvalView,
    IconPicture,
    ElConfigProvider,
    ElMessageBox,
    ElMessage,
    ElDatePicker,
  },
  setup() {
    return {
      locale: zhCn,
    };
  },
  methods: {
    approval(obj) {
      this.$refs.approvalView.getPrintTaskFormById(obj.taskId);
      this.$refs.approvalView.title = "任务审批";
      this.$refs.approvalView.dialogFormVisible = true;
    },
    deleteApp(id) {
      ElMessageBox.confirm("确定要删除本条记录吗？", "提醒", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          httpService("/pythonApi/printingSystem/delTask", "id=" + id, "post").then((data) => {
            if (data.status == 200) {
              ElMessage.success("删除成功");
              this.getTaskList();
            } else {
              ElMessage.error("任务不存在或已审批");
            }
          });
        })
        .catch(() => {});
    },
    onSearch() {
      this.getTaskList();
    },
    // 每页记录数改变，size：回调参数，表示当前选中的“每页条数”
    changePageSize(size) {
      this.limit = size;
      this.getTaskList();
    },

    // 改变页码，page：回调参数，表示当前选中的“页码”
    changeCurrentPage(page) {
      this.page = page;
      this.getTaskList();
    },
    tableRowClassName({ row, rowIndex }) {
      return "";
    },
    getTaskList() {
      let teacherNumber=JSON.parse(sessionStorage.getItem("user"));
      httpService(
        "/pythonApi/printingSystem/printTaskData",
        { duration: this.form.duration, teacherNumber: teacherNumber,userDepartment: this.form.userDepartment,
          status: this.form.status, page:this.page, limit: this.limit},
        "get"
      ).then((data) => {
        this.list = data.data;
        this.total = data.count;
      });
    },
    downTaskList() {
      httpService(
        "/pythonApi/printingSystem/downApprovalData",
        { duration: this.form.duration, teacherName: this.form.teacherName,userDepartment: this.form.userDepartment,
          status: this.form.status},
        "get"
      ).then((data) => {
      });
    },
    goPersonal() {
      this.$parent.power=0;
    }
  },
};
</script>

<style >
.app-table {
  background: #eff3f5;
  padding: 10px;
}
.app-search {
  margin-left: 10px;
  margin-top: 10px;
}
.app-body {
  background: white;
  padding: 20px;
}
</style>
